<!--
 * @Author: your name
 * @Date: 2021-11-21 11:49:32
 * @LastEditTime: 2021-12-06 15:40:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shenshan_cim\src\views\Home\xmxz\left\EventFiltering\index.vue
-->
<template>
  <div class="Bounce" v-if="bounceData.id.indexOf('永久基本农田') != -1 || bounceData.id.indexOf('稳定利用耕地') != -1 || bounceData.id.indexOf('控制性详细规划') != -1">
    <div class="close_button" @click="closeBounce(false)">×</div>
    <div class="bounce_content">
      <div class="content_left">
        <div
          class="content_item"
          v-for="(item, index) in bounceLeftData"
          :key="index"
        >
          <div class="text">{{ item.text }}：</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
      <div class="content_right">
        <div
          class="content_item"
          v-for="(item, index) in bounceRightData"
          :key="index"
        >
          <div class="text">{{ item.text }}：</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { editMap } from "../../../../utils/map";

export default {
  data() {
    return {
      // 存储画面的id
      polygonDatasID: [],

      // 保存弹窗左侧的数据
      bounceLeftData: [
      ],
      // 保存弹框右侧的数据
      bounceRightData: [
      ],
    };
  },
  computed: {
    ...mapState("Sjsx", ["bounceData"]),
  },
  methods: {
    ...mapActions({
      setIsShowBoune_act: "Sjsx/setIsShowBoune_act",
    }),
    // 弹窗数据 && 高亮
    async getBounceData() {
      console.log(this.bounceData, "弹窗数据");
      let polygonData = []; // 保留画面数据
      let bounceLeftDatas = []; // 保存弹窗左侧数据
      let bounceRightDatas = []; // 保存弹窗右侧数据
      // 截取id进行判断
      let splitPoint = "";
      splitPoint = this.bounceData.id.split(".");
      console.log(splitPoint, "splitPoint的值");
      if (splitPoint[0] == "永久基本农田") {
        (bounceLeftDatas = [
          {
            text: "原始代码",
            value: this.bounceData.properties.ysdm,
          },
          {
            text: "行政区划代码",
            value: this.bounceData.properties.xzqhdm,
          },

          {
            text: "长度",
            value: this.bounceData.properties.shape_leng,
          },
        ]),
          (bounceRightDatas = [
            {
              text: "标识码",
              value: this.bounceData.properties.bsm,
            },
            {
              text: "行政区划名称",
              value: this.bounceData.properties.xzqhmc,
            },
            {
              text: "面积",
              value: this.bounceData.properties.shape_area,
            },
          ]);

        this.bounceLeftData = bounceLeftDatas;
        this.bounceRightData = bounceRightDatas;
      }
      if (splitPoint[0] == "稳定利用耕地") {
        (bounceLeftDatas = [
          {
            text: "原始代码",
            value: this.bounceData.properties.ysdm,
          },
          {
            text: "面积",
            value: this.bounceData.properties.tbdlmj,
          },

          {
            text: "长度",
            value: this.bounceData.properties.shape_leng,
          },
        ]),
          (bounceRightDatas = [
            {
              text: "地类编码",
              value: this.bounceData.properties.dlbm,
            },
            {
              text: "标识码",
              value: this.bounceData.properties.bsm,
            },
            {
              text: "面积",
              value: this.bounceData.properties.shape_area,
            },
          ]);

        this.bounceLeftData = bounceLeftDatas;
        this.bounceRightData = bounceRightDatas;
      }
      // if (splitPoint[0] == "一级水源保护区"){
      //   this.bounceData = []
      // }
      // if (splitPoint[0] == "土地利用变更调查（2018）"){
      //   this.bounceData = []
      // }
      if (splitPoint[0] == "控制性详细规划") {
        (bounceLeftDatas = [
          {
            text: "类别",
            value: this.bounceData.properties.liebie,
          },
        ]),
          (bounceRightDatas = [
            {
              text: "名称",
              value: this.bounceData.properties.mingcheng,
            },
          ]);

        this.bounceLeftData = bounceLeftDatas;
        this.bounceRightData = bounceRightDatas;
      }
      if (splitPoint[0] == "永久基本农田规划") {
        (bounceLeftDatas = [
          {
            text: "原始代码",
            value: this.bounceData.properties.ysdm,
          },
          {
            text: "行政区划代码",
            value: this.bounceData.properties.xzqdm,
          },
          {
            text: "标识码",
            value: this.bounceData.properties.bsm,
          },
          {
            text: "面积",
            value: this.bounceData.properties.shape_area,
          },
        ]),
          (bounceRightDatas = [
            {
              text: "地类编码",
              value: this.bounceData.properties.dlbm,
            },
            {
              text: "行政区划名称",
              value: this.bounceData.properties.xzqmc,
            },
            {
              text: "长度",
              value: this.bounceData.properties.shape_leng,
            },
          ]);

        this.bounceLeftData = bounceLeftDatas;
        this.bounceRightData = bounceRightDatas;
      }

      

      this.bounceData.geometry.coordinates &&
        this.bounceData.geometry.coordinates.forEach((item) => {
          if (
            item instanceof Array &&
            item[0] instanceof Array &&
            item[0][0] instanceof Array
          ) {
            item.forEach((mon) => {
              mon.forEach((element) => {
                element[2] = 1;
              });
            });
          } else {
            item[2] = 1;
          }
        });

      let o = {
        id: this.bounceData.id + "_" + "highlight",
        coordinates: this.bounceData.geometry.coordinates,
        color: [1, 0, 0, 0.8],
        frameColor: [1, 1, 0, 0.8], //边框颜色
        frameThickness: 1, //边框厚度
        intensity: 1, //亮度
        // style: window.PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
        style: 0,
        depthTest: false, //是否做深度检测
        //   coordinateType: 1,
      };

      polygonData.push(o);
      console.log(polygonData, "polygonTypesData的值");
      polygonData.forEach((element) => {
        this.polygonDatasID.push(element.id);
      });
      if(splitPoint[0] == "永久基本农田" || splitPoint[0] == "稳定利用耕地" || splitPoint[0] == "控制性详细规划" || splitPoint[0] == "永久基本农田规划")
      await editMap(polygonData, 2);
    },
    // 关闭弹窗
    async closeBounce(val) {
      this.setIsShowBoune_act(val);
      await window.__g.polygon.delete(this.polygonDatasID);
    },
  },
  watch:{
    bounceData(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  },

  mounted() {
    this.getBounceData(); // 获取弹窗数据
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.Bounce {
  display: flex;
  flex-direction: column;
  width: 40%;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 50px;
  position: absolute;
  left: 30%;
  top: 30%;
  //   margin: 20px auto;
  //   border: 1px solid #fff;
  background: linear-gradient(
      180deg,
      rgba(0, 50, 105, 0.432802) 0%,
      rgba(4, 17, 32, 0.5) 100%
    ),
    rgba(0, 5, 10, 0.334353);
  height: 405px;
  border-radius: 4px 4px 4px 4px;
  z-index: 100;
  font-size: 18px;
  .close_button {
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    font-size: 24px;
    padding-bottom: 10px;
}
  .bounce_content {
    display: flex;

    .content_left {
      width: 50%;

      .content_item {
        display: flex;
        padding: 13px 10px;
        .text {
        }
        .value {
        }
      }
    }
    .content_right {
      width: 50%;
      .content_item {
        display: flex;
        padding: 13px 10px;
        .text {
        }
        .value {
        }
      }
    }
  }
}
</style>
